<template>
	<div class="reg-container">
		<div class="reg-box">
			<div class="title-box">
				<!--注册表单区域-->
				<h1>后台管理系统</h1>
				<!-- form标签自带校验-->
				<el-form ref="form" :model="form" :rules="rulesObj">
					<el-form-item prop="username">
						<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item prop="repassword">
						<el-input type="password" v-model="form.repassword" placeholder="请确定密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onsubmit">注册</el-button>
						<el-link type='info' @click="$router.push('/login')" green-color>去登录</el-link>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	//前端绑定数据对象属性名，可以直接给要调用的功能接口参数名一致

	import {
		registerAPI
	} from '@/api'


	//好处:我可以直接把前端对象(带着同名的属性和前端的值)发给后台
	export default {
		name: 'my-register',
		data() {
			//校验函数，必须在data函数中定义此箭头函数，才能确保this.form使用
			const samePwdFn = (rule, value, callback) => {
				if (value !== this.form.password) {
					//如果验证失败，则调用回调函数是，指定一个error对象
					callback(new Error('两次输入的密码不一致'))
				} else {
					//如果验证成功，则直接调用callback回调函数即可
					callback()
				}
			}
			return {
				form: { //表单数据
					username: '',
					password: '',
					repassword: ''
				},
				rulesObj: { // 表单规则校验对象,用正则表达式
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z0-9]{1,10}$/,
							message: '用户名必须是1-10的大小写字母数字',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符串',
							trigger: 'blur'
						}
					],
					repassword: [ //校验两次密码相同，发现正则表达式不能判断，则用自定义函数
						{
							required: true,
							message: '请再次输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符串',
							trigger: 'blur'
						},
						{
							validator: samePwdFn,
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			//注册-点击事件
			onsubmit() {
				//js兜底校验，js调用表单整体校验的方法
				this.$refs.form.validate(async  valid => {
					if (valid) {
						//通过校验
						console.log(this.form)
						// 1. 调用注册接口
						//这里又是一个解构赋值，把axios返回的数据对象里data字段对应的值保存在res上
						const {
							data: res
						} = await registerAPI(this.form)
						console.log(res)
						// 2. 注册失败，提示用户
						//elementUI还在Vue的原型上添加了弹窗提示,$message属性
						if (res.code !== 0) return this.$message.error(res.message)
						// 3. 注册成功，提示用户
						this.$message.success(res.message)
						// 4. 跳转到登录页面
						this.$router.push('/login')
					} else {
						return false //阻止默认提交行为(表单下面红色提示会自动出现)
					}
				})
			}
		},
		created() {

		}
	}
</script>

<style scoped lang="less">
	.reg-container {
		background: url('../../assets/images/tu.jpg') center;
		background-size: cover;
		height: 800px;

		.reg-box {
			width: 400px;
			height: 350px;
			background-color: #fff;
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			padding: 0 50px;
			box-sizing: border-box;
			background: url(../../assets/images/tu1.jpg) no-repeat center;
			background-size: cover;
		}

		.title-box {
			height: 300px;
			width: 300px;
			margin-right: 10px;
			;
		}

		button {
			width: 100%;
		}
	}
</style>